const ctx = "";
const maxLen = 100;
const options = {
  data() {
    return {
      dialog: false,
      vsn: null,
      videoList: [
        {sn: 301, name: "大屏展示区", images: []},
        {sn: 701, name: "公司正门", images: []},
        {sn: 601, name: "前台", images: []},
        {sn: 501, name: "过道#1", images: []},
        {sn: 201, name: "过道#2", images: []},
        {sn: 101, name: "餐厅", images: []},
        {sn: 401, name: "办公区", images: []},
        {sn: 1001, name: "1#门禁", images: []},
        {sn: 901, name: "2#门禁", images: []},
        {sn: 801, name: "3#门禁", images: []},
      ],
      curImgIndex: null,
      curImgEl: null,
      curImgGroup: [],
      timer: null,
      count: 20
    }
  },
  watch: {
    curImgIndex(nval, oval) {
      if (this.curImgEl) {
        this.curImgEl.src = this.curImgGroup[oval].path;
        this.curImgEl = null;
        this.stopLive();
      }
    }
  },
  computed: {
    videoSet() {
      let vset = {};
      for (let v of this.videoList) {
        vset[v.sn] = v;
      }
      return vset;
    }
  },
  mounted() {
    connect();
    this.init();
  },
  methods: {
    handleWSMessage(data, message) {
      data = data.data;
      let video = this.videoSet[data.cameraSN];
      if (video) {
        let images = video.images;
        let len = images.unshift(data); // 新图置顶
        let distance = len - maxLen;
        if (distance > 0) { // 超出最大限制
          //distance *= -1;
          distance = -Math.floor(maxLen * 0.1); // 移除后10%
          images.splice(distance);
        }
      }
    },
    zoomMax(index) {
      this.dialog = true;
      this.curImgIndex = index;
      this.curImgGroup = this.videoSet[this.vsn].images;
    },
    playLive(event) {
      this.curImgEl = event.target;
      let index = this.curImgGroup.length;
      this.timer = setInterval(() => {
        this.curImgEl.src = this.curImgGroup[--index].path;
        if (this.curImgIndex === index) {
          this.stopLive();
        }
        console.log(index);
      }, 300);
    },
    stopLive() {
      clearInterval(this.timer);
    },
    init() {
      fetch("/rest/data/images?count=" + this.count).then(response => response.json())
        .then(result => {
          for (let sn in result.data) {
            if (this.videoSet[sn]) {
              this.videoSet[sn].images.length = 0;
              this.videoSet[sn].images.push(...result.data[sn])
            }
          }
        })
    }
  }
};
const vuetify = Vuetify.createVuetify({
  theme: {
    defaultTheme: 'dark'
  }
});
const app = Vue.createApp(options).use(vuetify).mount('#app');
